DOM

DOM(Document Object Model，文件物件模型)是 HTML、XML 和 SVG 文件的程式介面，它的功能是提供了一個 API 來訪問、讀取或改變頁面的內容。節點上可以加上物件處理的程序，一旦觸發事件就會執行處理程序，DOM常常會被javascript拿來使用，但是他並不屬於javascript的一員，雖然不常見，但他也可以被其他語言使用。

虛擬DOM

虛擬DOM的存在就是為了避免直接操作DOM，因為直接操作DOM往往很費時費力，所以虛擬DOM在react上是很受歡迎的，因為人們可以透過react進而去操作虛擬DOM，

Virtual DOM 實際上的作法就是用物件來描述 DOM 的結構，在 DOM 的節點需要更動時，不直接修改 DOM，而是透過 diff 演算法比較 Virtual DOM 修改前與修改後的樹狀結構，然後批次更新真實 DOM 中的節點。

了解完了DOM後，我們來看看什麼是React-DOM?
如果想要全局使用React-DOM的API功能，可以使用來加載 ，但各個版本使用ReactDOM的方始也不太一樣，
使用ES6 與npm :import ReactDOM from 'react-dom'
使用ES5 與npm :var ReactDOM = require('react-dom')
接下來將介紹最常使用到的render()語法
ReactDOM.render(componentToRender, targetNode)
第一個參數是你想要渲染的 React 組件。第二個參數是要在其中呈現該組件的 DOM 節點

const react = (
  
  <div>
    <h1>Hello World</h1>
    <p>let's try some DOM</p>
  </div>
);
ReactDOM.render(react, document.getElementById("challenge-node"));

在網頁上呈現的就會是這樣

ReactDOM.render()必須在元素宣告完之後才能調用，就像在使用變量之前必須宣告變量一樣

接下來我們來看看在React內使用DOM的例子吧

將 class component render到 DOM方法

class TypesOfFood extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>Types of Food:</h1>
        <Fruits />
        <Vegetables />
      </div>
    );
  }
};
ReactDOM.render(<TypesOfFood />, document.getElementById('challenge-node'))

Fruits和組件都是Vegetables已經被定義的，我們要做的事是把TypesOfFood渲染到 DOM

這是輸出結果

參考文章:
https://medium.com/%E6%89%8B%E5%AF%AB%E7%AD%86%E8%A8%98/build-a-simple-virtual-dom-5cf12ccf379f
https://developer.mozilla.org/zh-TW/docs/Web/API/Document_Object_Model
https://www.freecodecamp.org/learn/front-end-development-libraries/react/render-a-class-component-to-the-dom